import React, { lazy } from "react";
import "./Engineering-security.less";
import StatusButton from "../components/jwh/StatusButton";
import MonitoringList from "../components/jwh/MonitoringList";
import SatelliteMap from "../components/jwh/Mapcontainer"
import { Image } from "antd";

const Echartsone = lazy(() => import('../components/jwh/Echartsone'));
const Echartstwo = lazy(() => import('../components/jwh/Echartstwo'));
const Echartsthree = lazy(() => import('../components/jwh/Echartsthree'));
const Echartsfour = lazy(() => import('../components/jwh/Echartsfour'));

const EngineeringSecurity: React.FC = () => {

    const list = [
        {
            name: "总干渠",
            odds: "100%",
            undertaker: "张三"
        },
        {
            name: "水闸1",
            odds: "100%",
            undertaker: "李四"
        },
        {
            name: "支渠",
            odds: "100%",
            undertaker: "王五"
        },
        {
            name: "机泵1",
            odds: "100%",
            undertaker: "赵六"
        }
    ]

    return (
        <div className="Engineering">
            <div className="Engineering-left">
                <div className="Engineering-left-top">
                    <p>工程巡查分析</p>
                    <div className="item-header">
                        <span>巡查工程：16个</span>
                        <span>今日巡查工程：5个</span>
                    </div>
                    <div className="item-title">
                        <span>巡查工程</span>
                        <span>巡查率</span>
                        <span>负责人</span>
                    </div>
                    {
                        list.map((item, index) => {
                            return (
                                <div className="item" key={index}>
                                    <span>{item.name}</span>
                                    <span>{item.odds}</span>
                                    <span>{item.undertaker}</span>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="Engineering-left-middle">
                    <p>设备态势</p>
                    <div className="echarts-one">
                        <Echartsone />
                    </div>
                </div>
                <div className="Engineering-left-bottom">
                    <p>设备运行状态</p>
                    <div className="echarts-two">
                        <Echartstwo />
                    </div>
                </div>
            </div>
            <div className="Engineering-center">
                <SatelliteMap
                    center={[118.353434, 29.397181]} // 上海坐标
                    zoom={10}
                />
            </div>
            <div className="Engineering-right">
                <div className="Engineering-right-top">
                    <p>隐患分析</p>
                    <div className="Engineering-right-top-echarts">
                        <div className="Engineering-right-top-Three">
                            <Echartsthree />
                        </div>
                        <div className="Engineering-right-top-Four">
                            <Echartsfour />
                        </div>
                    </div>
                </div>
                <div className="Engineering-right-middle">
                    <p>实时安全监测数据</p>
                    <StatusButton /><br />
                    <MonitoringList />
                </div>
                <div className="Engineering-right-bottom">
                    <p>应急响应</p>
                    <div className="box">
                        <div className="box-left">
                            <Image src="/1.png" width={70} height={70} /><br />
                            <Image src="/3.png" width={70} height={50} />
                        </div>
                        <div className="box-right">
                            <span>开始时间：2024-11-1-16:00</span><br />
                            <span>结束时间：响应中</span>
                            <br />
                            <br />
                            <p>
                                <span>
                                    响应描述：11月1日16时，今年第21号台风
                                    “康妮”位于朱家尖岛偏南方向约55公里的
                                    海面上，预计“康妮”将以每小时45公里左
                                    右速度向东北方向快速移动，强度逐渐减
                                    弱，11月1日17时，省水利厅调整水旱灾害防御（防台）应急响应至Ⅲ级
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EngineeringSecurity;